<template>
  <div>
    <div>
      <el-row>
        <el-col>
          <el-table :data="orderGoods">
            <el-table-column label="详情" width="330">
              <template slot-scope="scope">
                <div style="float: left">
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="scope.row.goodsUrl"
                    fit="cover"></el-image>
                </div>
                <div style="float: left; padding-left: 10px; overflow: hidden">
                  <a>{{scope.row.goodsSn}}</a><br/>
                  <a>{{scope.row.goodsName}}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column property="goodsAttr" label="尺寸" width="170"></el-table-column>
            <el-table-column label="数量" width="100">
              <template slot-scope="scope">x{{scope.row.goodsNumber}}</template>
            </el-table-column>
            <el-table-column label="单价" width="100">
              <template slot-scope="scope">¥{{scope.row.goodsPrice}}</template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form :model="orderAllInfo" class="licc-order-info-dialog-process-form" label-width="110px">
            <el-form-item label="总额：">{{orderAllInfo.goodsAmount}}</el-form-item>
            <el-form-item label="购买人手机号：">{{orderAllInfo.phone}}</el-form-item>
            <el-form-item label="收货人姓名：">{{orderAllInfo.consignee}}</el-form-item>
            <el-form-item label="收货人手机号：">{{orderAllInfo.phone}}</el-form-item>
            <el-form-item label="收货地址：">
              {{orderAllInfo.province}}{{orderAllInfo.city}}{{orderAllInfo.district}}{{orderAllInfo.street}}-{{orderAllInfo.address}}
            </el-form-item>
            <el-form-item label="订单留言：">
              {{orderAllInfo.postscript}}
            </el-form-item>
            <el-form-item v-if="applayReturnOrderShow" label="退货理由：">{{orderReturnInfo.returnNote}}</el-form-item>
            <el-form-item v-if="returnOrderShow" label="退货处理结果：">{{orderReturnInfo.processInformation}}</el-form-item>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in orderActivities"
                :key="index"
                :color="activity.color"
                :timestamp="activity.timestamp">
                {{activity.content}}
              </el-timeline-item>
            </el-timeline>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

  import orderCartApi from '@/api/order'
  export default {
    props:['message'],
    data(){
      return {
        orderGoods:[],
        orderAllInfo:{},
        orderReturnInfo:{},
        orderActivities:[],
        applayReturnOrderShow: false,
        returnOrderShow: false
      }
    },
    created(){
      this.initPage();
    },
    methods: {
      initPage(){
        this.orderAllInfo = this.message;
        this.orderGoods = this.message.orderGoods;
        this.timeShowRule( this.orderAllInfo);
      },
      timeShowRule(orderInfo){
        if (orderInfo.orderStatus==10){
          this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({ content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({ content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({ content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
        }
        if (orderInfo.orderStatus==20){
          this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
        }
        if (orderInfo.orderStatus==30){
          this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({ content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
        }
        if (orderInfo.orderStatus==40){
          this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({ content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({ content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
        }
        if (orderInfo.orderStatus==50){
          this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({ content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({ content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({ content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
        }
        if (orderInfo.orderStatus==60){}
        if (orderInfo.orderStatus==70){
          this.getOrderInfo(orderInfo.id);
          this.returnOrderShow = true;
          this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({ content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({ content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({ content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
          this.orderActivities.push({ content: '退货申请时间', color: '#E6A23C', timestamp: orderInfo.applayReturnTime});}
        if (orderInfo.orderStatus==80){
          this.getOrderInfo(orderInfo.id);
          this.returnOrderShow = true;
          this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({ content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({ content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({ content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
          this.orderActivities.push({ content: '退货申请时间', color: '#E6A23C', timestamp: orderInfo.applayReturnTime});
        }
        if (orderInfo.orderStatus==90){
          this.getOrderInfo(orderInfo.id);
          this.returnOrderShow = true;
          this.applayReturnOrderShow = true;
          this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({ content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({ content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({ content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
          this.orderActivities.push({ content: '退货申请时间', color: '#E6A23C', timestamp: orderInfo.applayReturnTime});
          this.orderActivities.push({ content: '退货处理时间', color: '#F56C6C', timestamp: orderInfo.returnTime});
        }
        if (orderInfo.orderStatus==95){
          this.getOrderInfo(orderInfo.id);
          this.returnOrderShow = true;
          this.applayReturnOrderShow = true;
          this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
          this.orderActivities.push({ content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
          this.orderActivities.push({ content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
          this.orderActivities.push({ content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
          this.orderActivities.push({ content: '退货申请时间', color: '#E6A23C', timestamp: orderInfo.applayReturnTime});
          this.orderActivities.push({ content: '退货处理时间', color: '#F56C6C', timestamp: orderInfo.returnTime});
        }
      },
      getOrderInfo(orderId){
        orderCartApi.getOrderReturnInfoByOrderId({orderId:orderId}).then(res => {
          this.orderReturnInfo = res.data;
        }).catch(() => {

        })
      }
    }
  }
</script>

<style>
  .licc-order-info-dialog-process-form>.el-form-item{
    margin-bottom: 0px;
  }
</style>
